<!--
 * @Author: giteezr 2250368646@qq.com
 * @Date: 2024-04-13 10:54:08
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2024-04-26 14:55:15
 * @FilePath: \vue3+nodeJs\houtaiguanli\management-system\src\views\echarts\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="折线图">
      <el-row :gutter="24" v-if="activeName == 0">
        <el-col :span="6">
          <h4>LineChart/index</h4>
          <LineChart></LineChart>
        </el-col> 
        <el-col :span="6">
          <h4>LineChart/index1</h4>
          <LineChart1></LineChart1>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index2</h4>
          <LineChart2></LineChart2>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index3</h4>
          <LineChart3></LineChart3>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index4</h4>
          <LineChart4></LineChart4>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index5</h4>
          <LineChart5></LineChart5>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index6</h4>
          <LineChart6></LineChart6>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index7</h4>
          <LineChart7></LineChart7>
        </el-col>
        <el-col :span="6">
          <h4>LineChart/index8</h4>
          <LineChart8></LineChart8>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="饼图">
      <el-row :gutter="24" v-if="activeName == 1">
        <el-col :span="4">
          <h4>index</h4>
          <BarChart></BarChart>
        </el-col>
        <el-col :span="6">
          <h4>barChart/index1</h4>
          <BarChart1></BarChart1>
        </el-col>
        <el-col :span="4">
          <h4>barChart/index2</h4>
          <BarChart2></BarChart2>
        </el-col>
        <el-col :span="6">
          <h4>barChart/index3</h4>
          <BarChart3></BarChart3>
        </el-col>
        <el-col :span="6">
          <h4>barChart/index4</h4>
          <BarChart4></BarChart4>
        </el-col>
        <el-col :span="4">
          <h4>barChart/index5</h4>
          <BarChart5></BarChart5>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="柱状图">
      <el-row :gutter="24" v-if="activeName == 2">
        <el-col :span="6">
          <h4>index</h4>
          <ColumnarChart></ColumnarChart>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="地图">
      <el-row :gutter="24" v-if="activeName == 3">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="词云">
      <el-row :gutter="24" v-if="activeName == 4">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="关系图"><el-row :gutter="24" v-if="activeName == 5">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="象形柱图"><el-row :gutter="24" v-if="activeName == 6">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="雷达图"><el-row :gutter="24" v-if="activeName == 7">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="矩树图"><el-row :gutter="24" v-if="activeName == 8">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="漏斗图"><el-row :gutter="24" v-if="activeName == 9">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="河流图"><el-row :gutter="24" v-if="activeName == 10">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="路径图"><el-row :gutter="24" v-if="activeName == 11">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="K线图"><el-row :gutter="24" v-if="activeName == 12">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="树状图"><el-row :gutter="24" v-if="activeName == 13">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="旭日图"><el-row :gutter="24" v-if="activeName == 14">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="平行坐标系"><el-row :gutter="24" v-if="activeName == 15">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="水球图"><el-row :gutter="24" v-if="activeName == 16">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="散点图"><el-row :gutter="24" v-if="activeName == 17">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="桑吉图"><el-row :gutter="24" v-if="activeName == 18">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="仪表盘"><el-row :gutter="24" v-if="activeName == 19">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="盒须图"><el-row :gutter="24" v-if="activeName == 20">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
    <el-tab-pane label="热力图"><el-row :gutter="24" v-if="activeName == 21">
        <el-col :span="6">
          <h4>index</h4>
          <LineChart1></LineChart1>
        </el-col> </el-row></el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import LineChart from "./components/lineChart/index.vue";
import LineChart1 from "./components/lineChart/index1.vue";
import LineChart2 from "./components/lineChart/index2.vue";
import LineChart3 from "./components/lineChart/index3.vue";
import LineChart4 from "./components/lineChart/index4.vue";
import LineChart5 from "./components/lineChart/index5.vue";
import LineChart6 from "./components/lineChart/index6.vue";
import LineChart7 from "./components/lineChart/index7.vue";
import LineChart8 from "./components/lineChart/index8.vue";
import BarChart from "./components/barChart/index.vue";
import BarChart1 from "./components/barChart/index1.vue";
import BarChart2 from "./components/barChart/index2.vue";
import BarChart3 from "./components/barChart/index3.vue";
import BarChart4 from "./components/barChart/index4.vue";
import BarChart5 from "./components/barChart/index5.vue";
import ColumnarChart from "./components/columnarChart/index.vue";
import { ref } from "vue";
const activeName: any = ref(0);
</script>
<style>
.inner-page,
.el-tabs--border-card {
  height: 100%;
  box-sizing: border-box;
}

.el-tabs__content {
  height: 97%;
  box-sizing: border-box;
  overflow: auto;
  background: #f5f7fa;
}

.el-main {
  height: 99% !important;
  box-sizing: border-box;
}
</style>
